<template>
  <div class="skuAdd">
    <h3 class="title">基础资料
      <span>（商品编号可有扫描枪扫描自动填写，也可手动输入）</span>
    </h3>
    <div class="add-wrapper">
      <el-row :gutter="30">
        <el-col :span="6">
          <span>商品类别：</span>
          <i>{{kindText}}</i>
        </el-col>
        <el-col :span="6">
          <span>
            <b>*</b>商品名称</span>
          <el-input v-model="addData.goodsName" placeholder="商品名称可包含含香型" size="small"></el-input>
        </el-col>
        <el-col :span="6">
          <span>
            <b>*</b>原料</span>
          <el-select v-model="addData.rawDesc" placeholder="请选择" size="small">
            <el-option :label="item.value" :value="item.id" v-for="(item,index) in rawList" :key="index">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="6">
          <span>
            <b>*</b>酿造工艺</span>
          <el-select v-model="addData.makeTechnology" placeholder="请选择" size="small">
            <el-option :label="item.value" :value="item.id" v-for="(item,index) in technicsList" :key="index">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span>
            <b>*</b>窖藏条件</span>
          <el-select v-model="addData.depotCondition" placeholder="请选择" size="small">
            <el-option :label="item.value" :value="item.id" v-for="(item,index) in cellarList" :key="index">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span>
            <b>*</b>产地</span>
          <el-select v-model="addData.productPlace" placeholder="请选择" size="small">
            <el-option :label="item.value" :value="item.id" v-for="(item,index) in placeList" :key="index">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="6">
          <span>
            <b>*</b>生产标准</span>
          <el-select v-model="addData.productStandard" placeholder="请选择" size="small">
            <el-option :label="item.value" :value="item.id" v-for="(item,index) in standardList" :key="index">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <span>
            <b>*</b>生产许可</span>
          <el-select v-model="addData.productPermit" placeholder="请选择" size="small">
            <el-option :label="item.value" :value="item.id" v-for="(item,index) in licenseList" :key="index">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-button type="primary" size="medium" @click="addSubmit">确认新增</el-button>
        <el-button size="medium" @click="$router.go(-1)">&emsp;返回&emsp;</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      kindText: '',
      rawList: [], //原料
      technicsList: [], //酿造工艺
      cellarList: [], //窖藏条件
      placeList: [], //产地
      standardList: [], //生产标准
      licenseList: [], //生产许可
      addData: {
        goodsName: "",
        goodsKindFirst: "",
        goodsKindSecond: "",
        rawDesc: "",
        makeTechnology: "",
        depotCondition: "",
        productPlace: "",
        productStandard: "",
        productPermit: ""
      }
    };
  },
  mounted() {
    this.getList();
    this.getKind();
  },
  methods: {
    async getList() {
      let { data } = await this.$post({
        api: "/show/maketech"
      });
      if (data.code === 0) {
        this.rawList = data.data.raw_desc;
        this.technicsList = data.data.make_technology;
        this.cellarList = data.data.depot_condition;
        this.placeList = data.data.product_place;
        this.standardList = data.data.product_standard;
        this.licenseList = data.data.product_permit;
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
    },
    async getKind() {
      let { data } = await this.$post({
        api: "/show/leftmenu"
      });
      if (data.code === 0) {
        data.data.forEach(item => {
          item.attrKeyList.forEach(todo => {
            if (todo.id == this.$route.query.kind) {
              this.kindText = item.name + ' / ' + todo.name;
              this.addData.goodsKindFirst = item.id;
              this.addData.goodsKindSecond = todo.id;
            }
          })
        })
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
    },
    async addSubmit() {
      for (let attr in this.addData) {
        if (!this.addData[attr]) {
          this.$message({
            type: "error",
            message: "以上均为必填项"
          });
          return;
        }
      }
      let { data } = await this.$post({
        api: "/add/newsku",
        data: this.addData
      });
      if (data.code === 0) {
        this.$router.go(-1);
      } else {
        this.$message({
          type: "error",
          message: data.msg
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  line-height: 70px;
  font-size: 18px;
  padding-left: 30px;
  border-bottom: 1px solid #eeeeee;
  span {
    font-size: 14px;
  }
}
.add-wrapper {
  padding: 15px 30px;
}
.el-row {
  margin: 30px;
  &:last-child {
    margin: 60px 0 0 15px;
  }
}

.el-col {
  display: flex;
  align-items: center;
  span {
    flex: 0 0 100px;
    width: 100px;
    padding-right: 20px;
    text-align: right;
    box-sizing: border-box;
  }
  b {
    color: red;
    vertical-align: middle;
    margin-right: 5px;
  }
  .el-input,
  .el-select {
    flex: 1;
  }
}
</style>